feat: react-native-reanimated as peer dependency#4912
feat: react-native-reanimated as peer dependency#4912wonderlul wants to merge 6 commits intocallstack:v6from
Conversation
|
Hey @wonderlul, thank you for your pull request 🤗. The documentation from this branch can be viewed here. |
adrcotfas
left a comment
adrcotfas
left a comment
There was a problem hiding this comment.
example/package.json uses reanimated and worklets entries but older versions. We should bump those too or use * to avoid maintenance.
| "react-native-safe-area-context": "*" | ||
| "react-native-reanimated": ">=4.3.0", | ||
| "react-native-safe-area-context": "*", | ||
| "react-native-worklets": ">=0.8.1" |
There was a problem hiding this comment.
Just a comment, not necessarily requesting changes as I'm not sure about best practices for devDependencies vs peerDependencies but reanimated 4.3.0's own peer dep is react-native-worklets: 0.8.x. This would allow react-native-worklets: 0.9.0 even though reanimated would reject it.
There was a problem hiding this comment.
I'm not quite sure here as well. I think Paper should only states minimums; Reanimated’s own peerDependencies and the app’s lockfile are where compatible worklets / Reanimated pairings are enforced.
There was a problem hiding this comment.
I'm fine having the minimums for peer dependencies, we just need to make sure this is described on documentation for user troubleshooting purposes.
| jest.mock('react-native-safe-area-context', () => mockSafeAreaContext); | ||
|
|
||
| jest.mock('react-native-worklets', () => | ||
| require('react-native-worklets/src/mock') |
There was a problem hiding this comment.
I suggest react-native-worklets/lib/module/mock instead like reanimated uses too in their source code. It's the same artifact runtime code uses, so it doesn't depend on a working TS transform pipeline at test time.
| @@ -0,0 +1 @@ | |||
| require('react-native-reanimated').setUpTests(); | |||
There was a problem hiding this comment.
I suggest converting to ESM with a named import so this file matches testSetup.js (the sibling jest setup file already uses import):
import { setUpTests } from 'react-native-reanimated';
setUpTests();
| ``` | ||
|
|
||
| :::note | ||
| If you're using a bare React Native project (not Expo), you need to add `react-native-worklets/plugin` to your `babel.config.js` plugins array. See the [Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) for details. |
There was a problem hiding this comment.
A comment from Claude:
Two problems with the original wording.
Structural: the plugin instruction was inside a :::note block, which reads as "supplemental info you can skip." But this plugin is mandatory; without it, worklets fails at runtime with confusing errors. Required setup belongs in the install steps, not in a sidebar.
Factual: the original implied Expo users skip this. Reanimated v4 / worklets v0.8 require the babel plugin regardless of toolchain. The safe wording is "required for both Expo and bare React Native" rather than guessing per setup.
| @@ -0,0 +1,3 @@ | |||
| import { setUpTests } from 'react-native-reanimated'; | |||
There was a problem hiding this comment.
lets create a jest folder and move the file to there, so other future jest specific stuff can live there.
| - From `v5` there is a need to install [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area. | ||
|
|
||
| ```bash npm2yarn | ||
| npm install react-native-safe-area-context | ||
| ``` | ||
|
|
||
| - You also need to install [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) and [react-native-worklets](https://docs.swmansion.com/react-native-worklets/) for animations. | ||
|
|
||
| ```bash npm2yarn | ||
| npm install react-native-reanimated react-native-worklets | ||
| ``` |
There was a problem hiding this comment.
No need to make installation multiple steps. There should be a single installation step that installs both safe area context and reanimated + worklets.
We should also mention the installation steps for Expo. Example:
React Native Paper uses [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area, [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) and [react-native-worklets](https://docs.swmansion.com/react-native-worklets/) for animations.
Then under the description we have 2 tabs, Expo and Community CLI and have commands that shows how to install (Expo willl use expo install).
The previous "From v5" wording also seems unncessary, this documentation refers to the latest version so there is no need to mention this.
| npm install react-native-reanimated react-native-worklets | ||
| ``` | ||
|
|
||
| - Follow the [React Native Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) for your toolchain (Expo vs React Native Community CLI). **Community CLI** setups must add `'react-native-worklets/plugin'` **last** in your `babel.config.js` `plugins` array. **Expo** setups follow that guide’s Expo steps (install packages and rebuild native code); starter templates [since Expo SDK 50](https://expo.dev/changelog/2024/01-18-sdk-50) usually include the Worklets Babel plugin already—add it only if your `babel.config.js` does not. Paper declares **minimum** supported versions for `react-native-reanimated` and `react-native-worklets` under `peerDependencies` in [`package.json`](https://github.com/callstack/react-native-paper/blob/main/package.json) (`>=` ranges, not pinned versions). When troubleshooting animation or native build problems, confirm your installed packages meet those minimums. |
There was a problem hiding this comment.
Avoid wall of text, make this bullet points so it's readable. After adding tabs as per previous comment, move relevant part to it's own tab so there is less to read.
Paper declares minimum supported versions for
react-native-reanimatedandreact-native-workletsunderpeerDependenciesinpackage.json(>=ranges, not pinned versions). When troubleshooting animation or native build problems, confirm your installed packages meet those minimums.
We don't need to say we declare peer deps. User will get the warning/error if they don't match it from package manager. ">= ranges, not pinned versions" is also an unnecessary detail to mention. What we should do is document something as follows:
Minimum requirements:
- `react-native` [version]
- `expo` [version]
- `react-native-safe-area-context` [version]
- etc.5 participants
Motivation
react-native-reanimated (v4) is the intended path for animated Paper components. Today the library still uses React Native’s built-in Animated API everywhere; this PR does not migrate any UI yet. It only declares the new peer dependencies so consumers install compatible versions up front, and so maintainers can add Reanimated-based animations in follow-up PRs without changing the public dependency contract again.
Reanimated 4 depends on react-native-worklets, so both packages are added as peers (and as dev dependencies for local development, type-checking, and tests).